<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>supermall</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- 七.解决首页中可滚动区域的问题
    Better-Scroll在决定有多少区域可以滚动时,是根据scrollerHeight属性决定
    scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度
    但是我们的首页中,刚开始在计算scrollerHeight属性时,是没有将图片计算在内的。所以,计算出来的告诉是错误的(1300+)
    后来图片加载进来之后有了新的高度,但是scrollerHeight属性并没有进行更新.所以滚动出现了问题
    如何解决这个问题了?
    监听每—张图片是否加载完成,只要有一张图片加载完成了,执行一次refresh()
    如何监听图片加载完成了?
    原生的js监听图片: img.onload = function()
    Vue中监听: @load='方法'
    调用scroll的refresh()

    如何将GoodsListItem.vue中的事件传入到Home.vue中
    因为涉及到非父子组件的通信,所以这里我们选择了事件总线
    bus->总线
    Vue.prototype.$bus = new Vue()
    this.$bus.$emit("事件名称', 参数)
    this.$bus.$on('事件名称', 回调函数(参数))

    对于refresh非常频繁的问题,进行防抖操作。
    防抖debounce/节流throttle
    防抖函数起作用的过程:
    如果我们直接执行refresh,那么refresh函数会被执行30次.
    可以将refresh函数传入到debounce函数中,生成一个新的函数.
    之后在调用非常频繁的时候.就使用新生成的函数.
    而新生成的函数,并不会非常频繁的调用,如果下一次执行来的非常快,那么会将上一次取消掉
    debounce(func, delay) {
      let timer = null;
      return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay)
      }
    }

    八.上拉加载更多的功能

    九.tabControl的吸顶效果
    9.1.获取到tabControl的offsetTop
    必须知道滚动到多少时,开始有吸顶效果,这个时候就需要获取tabControl的offsetTop
    但是,如果直接在mounted中获取tabControl的offsetTop,那么值是不正确.
    如何获取正确的值?
    监听HomeSwiper中img的加载完成.
    加载完成后,发出事件,在Home.vue中,获取正确的值.
    补充：为了不让HomeSwiper多次发出事件，可以使用isLoad变量进行状态的记录.
    注意：这里不进行多次调用，只需获取一次值 VS 防抖debounce

    9.2.监听滚动,动态的改变tabControl的样式
    问题:动态的改变tabControl的样式时,会出现两个问题:
    问题一:下面的商品内容,会突然上移
    问题二:tabControl虽然设置了fixed,但是也随着Better-Scroll一起滚出去了.其他方案来解决停留问题.
    在最上面,多复制了一份PlaceHolderTabControl组件对象,利用它来实现停留效果.
    当用户滚动到一定位置时, PlaceHolderTablcontrol显示出来.
    当用户滚动没有达到一定位置时, PlaceHolderTabControl隐藏起来.

    十.让Home保持原来的状态
    10.1.让Home不要随意销毁掉. keep-alive
    10.2.让Home中的内容保持原来的位置
    离开时,保存一个位置信息.saveY.
    deactivated() {
      this.saveY = this.$refs.scroll.getScrollY()
    }
    进来时,将位置设置为原来保存的位置saveY信息即可.
    注意：返回Home页面时需要refresh()
    activated() {
      this.$refs.scroll.scrollTo(0, this.saveY, 0)
      this.$refs.scroll.refresh()
    } -->

  <!-- 点击标题,滚动到对应的主题
    在Detail中监听标题的点击,获取index滚动到对应主题的offsetTop
    问题:在哪里才能获取到正确的offsetTop
    1.created肯定不行,压根不能获取元素
    2.mounted也不行,数据还没有获取到
    3.获取到数据的回调中也不行,DOM还没有渲染完
    4.$nextTick也不行,因为图片的高度没有被计算在类
    5.在图片加载完成后,获取的高度才是正确 -->

</body>

</html>
